<template>
  <div class="container">
    <l-map id="mapObj"
        :zoom="zoom"
        :center="center"
        :options="mapOptions"
        :style="mapWindowStyle"
        @update:center="centerUpdate"
        @update:zoom="zoomUpdate"
    >
      <l-tile-layer
          :url="url"
          :attribution="attribution"
      />
      <l-marker :lat-lng="withPopup">
        <l-popup>
          <div @click="innerClick">
            I am a popup
            <p v-show="showParagraph">
              详细信息1 xxxx
            </p>
          </div>
        </l-popup>
      </l-marker>
      <l-feature-group>
        <l-marker :lat-lng="withTooltip">
          <l-tooltip :options="{ permanent: true, interactive: true }">
            <div @click="innerClick">
              工具按钮提示：<br>I am a tooltip
              <p v-show="showParagraph">
                详细信息2。
              </p>
            </div>
          </l-tooltip>
        </l-marker>
      </l-feature-group>
    </l-map>
    <my-drag target="#mapObj" class="introduce" handle=".introduceHeader">
      <div class="introduceHeader">介绍</div>
      <p>Marker位于经纬度：({{ withPopup.lat }}, {{ withPopup.lng }})</p>
      <p>地图中心点：{{ currentCenter }}</p>
      <p>当前地图缩放级别：{{ currentZoom }}</p>
      <button @click="showLongText">
        查看详细信息
      </button>
    </my-drag>
  </div>
</template>

<script>
import MyDrag from "@/components/MyDrag.vue";
import L, { latLng } from 'leaflet';
import {
  LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LTooltip,
  LFeatureGroup,
} from 'vue2-leaflet';
const IMAGE_PATH = '/static/images'
L.Icon.Default.imagePath = IMAGE_PATH + '/'

export default {
  name: 'LeafletComponentDemo',
  components: {
    MyDrag,
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LTooltip,
    LFeatureGroup,
  },
  data() {
    return {
      zoom: 13,
      center: latLng(47.41322, -1.219482),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
          '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      withPopup: latLng(47.41322, -1.219482),
      withTooltip: latLng(47.41422, -1.250482),
      currentZoom: 11.5,
      currentCenter: latLng(47.41322, -1.219482),
      showParagraph: false,
      mapOptions: {
        zoomSnap: 0.5,
      },
      mapWindowStyle: {
        height: '0'
      },
    };
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  methods: {
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 200) + 'px';
    },
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    },
    showLongText() {
      this.showParagraph = !this.showParagraph;
    },
    innerClick() {
      alert('Click!');
    },
  },
};
</script>

<style lang="stylus" scoped>
@import 'leaflet/dist/leaflet.css'
.container
  position: relative
  #mapObj
    z-index: 0
  .introduce
    user-select: none
    z-index: 1
    position: absolute
    right: 5px
    top: 5px
    background-color: white
    border: solid 1px black
    box-shadow: black 0 3px 14px
    width: 350px
    padding: 0 0
    .introduceHeader
      background-color: black
      color: white
      padding-left: 10px
      font-size: 18px
      font-weight: bold
      font-family: inherit
</style>
